<template>
	<view class="container">
	    <!-- 核销码区域 -->
	    <view class="section">
	      <view class="code-area">
	        <text class="code-label">核销码：</text>
	        <text class="code-value">{{data.verification_code}}</text>
	      </view>
	    </view>
	
	    <!-- 维修信息 -->
	    <view class="section">
	      <h3 class="section-title">维修信息</h3>
	      <view class="info-item">
	        <text class="label">维修单号：</text>
	        <text class="value">{{data.repair_info.order_number}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">维修状态：</text>
	        <text class="status">{{data.repair_info.status_text}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">车主姓名：</text>
	        <text class="value">{{data.repair_info.customer_name}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">联系方式：</text>
	        <text class="value">{{data.repair_info.contact}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">维修方式：</text>
	        <text class="value">{{data.repair_info.service_text}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">取车位置：</text>
	        <text class="value">{{data.repair_info.pickup_location}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">预约日期：</text>
	        <text class="value">{{formatTime(data.repair_info.appointment_time)}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">提交日期：</text>
	        <text class="value">{{formatTime(data.repair_info.submit_time)}}</text>
	      </view>
	    </view>
	
	    <!-- 车辆信息 -->
	    <view class="section">
	      <h3 class="section-title">车辆信息</h3>
	      <view class="info-item">
	        <text class="label">车辆类型：</text>
	        <text class="value">{{data.vehicle_info.type_text}}</text>
	      </view>
	      <view class="info-item">
	        <text class="label">车牌号：</text>
	        <text class="value">{{data.vehicle_info.license_plate}}</text>
	      </view>
	    </view>
	
	    <!-- 图片区域 -->
	    <view class="section">
	      <view class="image-group">
	        <text class="image-label">整车照片：</text>
	        <view class="image-row">
	          <view class="image-box" v-for="(img, index) in data.vehicle_info.whole_car_photos" :key="index">
	            <image :src="img" mode="aspectFill" />
	          </view>
	        </view>
	      </view>
	      <view class="image-group">
	        <text class="image-label">维修部位照片：</text>
	        <view class="image-row">
	          <view class="image-box" v-for="(img, index) in data.vehicle_info.repair_photos" :key="index">
	            <image :src="img" mode="aspectFill" />
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const recordId=ref(0)
	
	onLoad((options) => {
	  recordId.value = options.id
	  console.log('接收到的ID:', recordId.value)
	
	})
	
	
	const data = ref({
	  verification_code: 'WE343235V',
	  repair_info: {
	    order_number: '3535252', // 此处值为动态数据
	    status_text: '进行中',
	    customer_name: '张三',
	    contact: '1993829282',
	    service_text: '上门取车',
	    pickup_location: '山阳区32号',
	    appointment_time: '2022-11-10T11:00:00',
	    submit_time: '2022-11-08T12:34:00'
	  },
	  vehicle_info: {
	    type_text: '大客车',
	    license_plate: '豫J45323',
	    whole_car_photos: [],
	    repair_photos: []
	  }
	})
	
	// 时间格式化方法
	const formatTime = (isoString) => {
	  const date = new Date(isoString)
	  return `${date.getFullYear()}/${(date.getMonth()+1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
	}
</script>

<style>
	     .container {
	       background-color: #ffffff;
	       min-height: 100vh;
	       padding: 15px;
	       box-sizing: border-box;
	     }
	     
	     /* 模块间距 */
	     .section {
	       margin-bottom: 20px;
	       background: #fff;
	       border-radius: 8px;
	       padding: 16px;
	       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	     }
	     
	     /* 核销码区域 */
	     .code-area {
	       display: flex;
	       flex-direction: column;
	       align-items: flex-start;
	       border-bottom: 1px solid #eeeeee;
	       padding-bottom: 15px;
	       margin-bottom: 15px;
	     }
	     
	     .code-label {
	       font-size: 15px;
	       color: #333333;
	       font-weight: 500;
	       margin-bottom: 8px;
	     }
	     
	     .code-value {
	       font-size: 18px;
	       color: #007AFF;
	       letter-spacing: 1px;
	       font-family: monospace;
	     }
	     
	     /* 二维码占位 */
	     .qrcode-placeholder {
	       width: 100px;
	       height: 100px;
	       background: #f5f5f5;
	       border: 1px dashed #cccccc;
	       margin-top: 10px;
	     }
	     
	     /* 标题样式 */
	     .section-title {
	       font-size: 16px;
	       color: #333333;
	       font-weight: 600;
	       margin: 0 0 15px 0;
	       padding-bottom: 8px;
	       border-bottom: 1px solid #f0f0f0;
	     }
	     
	     /* 信息行样式 */
	     .info-item {
	       display: flex;
	       justify-content: space-between;
	       align-items: center;
	       margin-bottom: 12px;
	       padding: 8px 0;
	     }
	     
	     .label {
	       font-size: 14px;
	       color: #666666;
	       flex: 0 0 80px;
	       margin-right: 15px;
	     }
	     
	     .value {
	       font-size: 14px;
	       color: #333333;
	       flex: 1;
	       text-align: right;
	     }
	     
	     /* 状态标签 */
	     .status {
	       font-size: 13px;
	       padding: 4px 8px;
	       border-radius: 4px;
	       background: #e6f3ff;
	       color: #007AFF;
	     }
	     
	     .status.completed {
	       background: #f5f5f5;
	       color: #999999;
	     }
	     
	     /* 图片占位区 */
	     .image-placeholder {
	       margin-top: 10px;
	     }
	     
	     .image-placeholder text {
	       display: block;
	       font-size: 14px;
	       color: #666;
	       margin-bottom: 8px;
	     }
	     
	     .placeholder-box {
	       width: 100%;
	       height: 100px;
	       background: #f5f5f5;
	       border: 1px dashed #ddd;
	       border-radius: 6px;
	     }
	     
	     /* 操作按钮 */
	     .action-bar {
	       position: fixed;
	       bottom: 0;
	       left: 0;
	       right: 0;
	       background: #fff;
	       padding: 15px;
	       box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
	     }
	     
	     .cancel-btn {
	       width: 100%;
	       height: 44px;
	       background: #ffffff;
	       border: 1px solid #007AFF;
	       color: #007AFF;
	       font-size: 16px;
	       border-radius: 8px;
	       display: flex;
	       align-items: center;
	       justify-content: center;
	     }
	     
	     .cancel-btn:active {
	       background: #f5f5f5;
	     }
	     
	     /* 精确间距调整 */
	     .info-item:last-child {
	       margin-bottom: 0;
	     }
	     
	     .section:last-child {
	       margin-bottom: 80px; /* 给底部按钮留出空间 */
	     }  
</style>
